 <!-- 续费功能的日期选择还有问题,初始日期无法屏蔽 -->
<template>
  <div class="contain">
    <div class="header">
      <el-page-header content="续费月卡" @back="$router.back()" />
      <div style="font-size:18px">黑马管理员</div>
    </div>
    <div class="main">
      <div class="carInfo">
        <el-card class="boxCard">
          <div class="carHeader">
            <span>车辆信息</span>
          </div>
          <div class="carMain">
            <el-form ref="carInfoForm" :label-position="labelPosition" label-width="80px" :model="carInfoForm">
              <el-row type="flex" justify="space-around">
                <el-col :span="8">
                  <el-form-item label="车主姓名">
                    <el-input v-model="carInfoForm.personName" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系方式">
                    <el-input v-model="carInfoForm.phoneNumber" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row type="flex" justify="space-around">
                <el-col :span="8">
                  <el-form-item label="车牌号码">
                    <el-input v-model="carInfoForm.carNumber" :disabled="true" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车辆品牌">
                    <el-input v-model="carInfoForm.carBrand" :disabled="true" />
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
          </div>
        </el-card>
      </div>
      <div class="feeInfo">
        <el-card class="boxCard">
          <div class="feeHeader">
            <span>月卡缴费信息</span>
          </div>
          <div class="feeMain">
            <el-form
              ref="feeInfoForm"
              :label-position="labelPosition"
              label-width="80px"
              :model="feeInfoForm"
              :rules="feeInfoRules"
            >
              <el-row type="flex" justify="space-around">
                <el-col :span="8">
                  <el-form-item prop="payTime" label="有效日期">
                    <div>
                      <el-date-picker
                        v-model="feeInfoForm.payTime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                      />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="paymentAmount" label="支付金额">
                    <el-input v-model="feeInfoForm.paymentAmount" placeholder="请输入支付金额" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8" style="margin-left:105px;">
                  <el-form-item prop="paymentMethod" label="支付方式">
                    <el-select v-model="feeInfoForm.paymentMethod">
                      <el-option v-for="item in payMethods" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
    <div class="btn">
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="renewConfirm">确认</el-button>
    </div>

  </div>

</template>

<script>
import { getEditCardDetailAPI, renewCardAPI } from '@/apis/carCard'
export default {
  data() {
    return {
      labelPosition: 'left',
      carInfoForm: {
        personName: '',
        phoneNumber: '',
        carNumber: '',
        carBrand: ''
      },
      feeInfoForm: {
        payTime: [],
        paymentAmount: '',
        paymentMethod: ''
      },
      feeInfoRules: {
        payTime: [{ required: true, message: '请输入有效日期', trigger: 'blur' }],
        paymentAmount: [{ required: true, message: '请输入支付金额', trigger: 'blur' }],
        paymentMethod: [{ required: true, message: '请输入支付方式', trigger: 'blur' }]
      },
      payMethods: [
        { label: '支付宝', value: 'Alipay' },
        { label: '微信', value: 'WeChat' },
        { label: '现金', value: 'Cash' }
      ]
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    }
  },
  created() {
    this.getEditCardDetail()
  },
  methods: {
    // 确认续费

    renewConfirm() {
      this.$refs.feeInfoForm.validate(async(valid) => {
        if (valid) {
          const data = this.feeInfoForm
          data.cardStartDate = this.feeInfoForm.payTime[0]
          data.cardEndDate = this.feeInfoForm.payTime[1]
          data.carInfoId = this.id
          delete data.payTime
          console.log(data)
          await renewCardAPI(data)
          this.$message.success('续费成功')
          this.$router.push('/parking/card')
        }
      })
    },
    // 获取编辑月卡详情
    async getEditCardDetail() {
      const res = await getEditCardDetailAPI(this.id)
      const { personName, phoneNumber, carNumber, carBrand } = res.data
      this.carInfoForm = { personName, phoneNumber, carNumber, carBrand }
      this.feeInfoForm.payTime = [res.data.cardEndDate, res.data.cardEndDate]

      console.log(this.feeInfoForm)
    },
    reset() {
      this.$refs.feeInfoForm.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  min-height: 100vh;
  background-color: #f4f6f8;

  .header {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    height: 50px;
    align-items: center;

    ::v-deep .el-page-header__title {
      font-size: 18px !important;
      font-weight: 300 !important;
    }
  }

  .main {
    padding: 0 300px;

    .carInfo {
      margin: 20px auto;
    }

    .feeInfo {
      .feeMain {
        ::v-deep .el-date-editor .el-range-separator {
          width: auto;
          /* 自动调整宽度 */
          padding: 0 5px;
          /* 增加左右内边距 */
        }
      }
    }
  }

  .btn {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
